<template>
  <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    title="我的订单"
    placeholder
    fixed
  />

  <van-list
    :immediate-check="false"
    offset="0"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-card
      @click="onOrderClick(item.id)"

      v-for="item in orderList"

      :key="item.id"
      currency=""
      :price="'总价：￥'+item.price"
      :desc="'地址：'+item.address"
      :title="'收件人：'+item.receiver"
    >
    <template #tags>
    <van-tag plain :type="item.orderStatus==0?'danger':'primary'">{{ item.orderStatus==0?'未完成':'已完成' }}</van-tag>
    <van-tag plain :type="item.payStatus==0?'danger':'primary'">{{ item.payStatus==0?'未付款':'已付款' }}</van-tag>
  </template>
  </van-card>
    <!-- :thumb="item.coverImage" -->
  </van-list>
</template>

<script setup>
import { getOrderStatusReq } from '@/api/order'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let orderList = ref()
let total = ref(0)
let loading = ref(false)
let finished = ref(false)
let per = 10
function getOrderList() {
  loading.value = false
  finished.value = false

  getOrderStatusReq().then((res) => {
    orderList.value = res.data.data
    total.value = res.data.total
    console.log('订单：', res.data)
  })
}
getOrderList()

// 加载更多
async function onLoad() {
  per += 10
  let res = await getOrderStatusReq(1, per)
// console.log(res.data);

  orderList.value = res.data.data
  // 加载状态结束
  loading.value = false
  // 数据全部加载完成
  if (orderList.value.length >= total.value) {
    finished.value = true
  }
}
let router=useRouter()
function onOrderClick(id){
  router.push('/orderdetail?id='+id)
console.log(id);

}
</script>

<style scoped>

</style>
